<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>类式组件</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>
		
		<script type="text/babel">
			//第一步：定义一个组件（类定义）
			class Demo extends React.Component{
				//render放在了Demo的原型对象上，供实例使用
				render(){
					//这几个概念是等价的：Demo类的实例对象 <=> Demo组件的实例对象 <=> 组件对象
					console.log('@@',this)//此处的this是Demo的实例对象（我们心中的d）
					return <h4>我是用类定义的组件（适用于【复杂组件】的定义）</h4>
				}
			}
			//第二步：渲染组件到页面
			ReactDOM.render(<Demo/>,document.getElementById('root'))
			/* 
				执行了ReactDOM.render(<Demo/>.......后发生了什么？
						1.react解析<Demo/>，发现Demo是用类定义的组件，随后react帮我们new了一个Demo的实例对象—— d。
						2.通过d调用到了render得到了返回的虚拟DOM。
						3.随后react将上一步返回的虚拟DOM渲染到页面。
			*/
		</script>
	</body>
</html>